/* eslint-disable import/no-unresolved,import/extensions,react/prop-types,react/sort-comp,no-use-before-define */
import React, { Component } from 'react';
import { Image, ListView, RefreshControl, StyleSheet, Text, TextInput, TouchableOpacity, View ,DeviceEventEmitter} from 'react-native';
import Toast from 'react-native-simple-toast';
import moment from 'moment';
import Dimensions from 'Dimensions';
import AppService from '../../service/AppService';
import RString from '../../language/RString';
import SuggestFindRequest from "../../contract/suggest/request/SuggestFindRequest";
const search = require('../img/search.png');

export default class SuggestList extends Component {

  constructor() {
  super();
    this.state = {
      dataSource:global.ds.cloneWithRows([]),
      request: {},
      keywords: null,
    };
      DeviceEventEmitter.addListener("language",this.getSuggestList);
  }

  componentDidMount() {
    this.state.request = this.props.request;
    this.getSuggestList();
  }


  getSuggestList = () => {
    const that = this;
    that.state.request.setSuggestTitle(that.state.keywords);
    AppService.findSuggest(that.state.request).then((data) => {
      if (!!data.errors === true && !!data.errors.length > 0) {
        Toast.show(data.errors[0].message);
      } else {
        that.setState({
          dataSource: global.ds.cloneWithRows(data.result || []),
        });
      }
    });
  };


  getState = (status) => {
      switch (status) {
      case 'TO_ACCEPT':
        return (
          <Text style={[styles.state, { color: '#3399ff' }]}>{RString('toaccept')}</Text>
        );
      case 'TO_DEAL':
        return (
          <Text style={[styles.state, { color: '#3399ff' }]}>{RString('todeal')}</Text>
        );
      case 'TO_CLOSE':
        return (
          <Text style={[styles.state, { color: '#3399ff' }]}>{RString('toclose')}</Text>
        );
      case 'CLOSED':
        return (
          <Text style={[styles.state, { color: '#666666' }]}>{RString('closed')}</Text>
        );
      case 'REOPEN':
        return (
          <Text style={[styles.state, { color: '#666666' }]}>{RString('reopen')}</Text>
        );
      case 'TO_EXAMINE':
            return (
              <Text style={[styles.state, { color: '#FFCC33' }]}>{RString('toexamine')}</Text>
            );
      default:
        return (
          <Text style={[styles.state, { color: '#52c26e' }]}>{RString('newCreate')}</Text>
        );
    }
  };

  getIcon = (status) => {
    switch (status) {
      case 'TO_ACCEPT':
        return require('../img/status/to_accept.png');
      case 'TO_DEAL':
        return require('../img/status/to_deal.png');
      case 'TO_CLOSE':
        return require('../img/status/to_close.png');
      case 'CLOSED':
        return require('../img/status/closed.png');
      case 'REOPEN':
        return require('../img/status/reopen.png');
      case 'TO_EXAMINE':
        return require('../img/examine.png');
      default :
        return require('../img/status/new.png');
    }
  };

  getTime = (time) => {
    if (!time) {
      return;
    }
    const t = new Date(parseInt(time));
    return moment(new Date(t)).format('YYYY/MM/DD HH:mm');
  };

  _renderRow = (item, rowId) => (
    <TouchableOpacity onPress={() => this.props.onClick(item)}>
      <View style={styles.row}>
        <Image resizeMode={'contain'} style={styles.icon} source={this.getIcon(item.status)} />
        <View style={styles.textView}>
          <Text style={styles.suggestTitle} numberOfLines={1}>{item.suggestTitle}</Text>
          <View style={styles.detail}>
            {this.getState(item.status)}
            <Text style={styles.date}>{this.getTime(item.suggestTime)}</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
        );

  render() {

    return (
      <View style={{ flex: 1 }}>
        <View style={styles.searchWrap}>
          <View style={styles.searchBar}>
            <TouchableOpacity onPress={this.getSuggestList}>
              <Image source={search} style={styles.searchIcon} resizeMode="contain" />
            </TouchableOpacity>
            <TextInput
              placeholder={RString('inputSuggestTitle')}
              style={styles.searchInput}
              placeholderTextColor="#dddddd"
              ref={v => this.textinput = v}
              value={this.state.keywords}
              returnKeyType="search"
              returnKeyLabel={RString('search')}
              onSubmitEditing={this.getSuggestList}
              onChangeText={(v) => {
                this.setState({ keywords: v });
              }}
              underlineColorAndroid={'transparent'}
            />
          </View>
        </View>
        <ListView
          dataSource={this.state.dataSource} style={{ flex: 1 }}
          renderRow={(rowData, sectionI, rowId) => this._renderRow(rowData, rowId)}
          removeClippedSubviews={false}
          refreshControl={
            <RefreshControl
              refreshing={false}
              onRefresh={this.getSuggestList}
            />}
          enableEmptySections={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  searchWrap: {
    height: 50,
    paddingTop: 7,
    paddingBottom: 7,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: '#f0eff4',
  },
  searchBar: {
    height: 35,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 5,
  },
  searchIcon: {
    marginLeft: 10,
    marginRight: 10,
  },
  searchInput: {
    flex: 1,
    fontSize: 14,
    padding: 0,
  },
  row: {
    height: 80,
    paddingRight: 10,
    paddingLeft: 10,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#dddddd',
    alignItems: 'center',
  },
  icon: {
    height: 50,
    width: 50,
    marginRight: 10,
  },
  textView: {
    height: 50,
    flex: 1,
    flexDirection: 'column',
  },
  suggestTitle: {
    flex: 1,
    width: Dimensions.get('window').width - (10 + 50 + 10 + 10),
    fontSize: 18,
    color: '#000',
  },
  detail: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  state: {
    flex: 1,
    fontSize: 14,
    textAlign: 'left',
  },
  date: {
    flex: 1,
    fontSize: 12,
    color: '#999',
    textAlign: 'right',
  },
});

